<template>
    <el-dialog :title="titleArray[types]" :visible.sync="showDialog" width="500px" custom-class="management-dialog">
     <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
            <el-form-item label="真实姓名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请填写正式姓名，这将显示在系统的所有信息里"></el-input>
            </el-form-item>
              <el-form-item label="用户名" prop="user">
                <el-input v-model="ruleForm.user" placeholder="轻微用户甚至用户名，浙江作为他的登录名"></el-input>
            </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
              <el-form-item label="部门" prop="department">
                <el-select v-model="ruleForm.department">
                    <el-option v-for="item in departmentArray" :key="item.value">{{item.label}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
              <el-form-item label="性别" prop="sex">
                  <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
                  <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
            </el-form-item>
             <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
     </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.stop="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm('ruleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
    name: 'userManagementDialog',
    props: {
        types: {
            type: Number,
            default () {
                return 1
            }
        },
        outerVisible: {
            type: Boolean,
            default () {
                return false
            }
        },
        departmentArray: {
            type: Array,
            default () {
                return []
            }
        }
    },
    data () {
        return {
            showDialog: false,
            titleArray: ['修改资料', '添加用户'],
            ruleForm: {},
            rules: {
                name: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' }
                ],
                user: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' }
                ],
                department: [
                    { required: true, message: '请选择部门', trigger: 'change' }
                ],
                phone: [
                    { required: false, message: '请输入真实姓名', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        confirm (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    return false
                }
            })
        },
        cancel () {
            this.showDialog = false
        }
    },
    watch: {
        'showDialog' (state) {
            if (!state) {
                this.$refs.ruleForm.resetFields()
                this.$emit('hideManagementDialog')
            }
        },
        'outerVisible' (state) {
            if (state) {
                this.showDialog = true
            }
        }
    }
}
</script>
<style lang="less">
.management-dialog {
}
</style>
